<template>
  <div class="lottie-test" ref="box"></div>
</template>

<script lang="ts" setup>
import {onMounted, ref} from 'vue'
import lottie from 'lottie-web'

const box = ref(null)
onMounted(() => {
  lottie.loadAnimation({

    container: box.value as unknown as Element, // 包含动画的dom元素

    renderer: 'svg', //渲染出来的是什么格式

    loop: true, //循环播放

    autoplay: true, //自动播放

    path: 'lottie.json', // 动画json的路径，这个路径表示 public 文件下面的资源的相对路径 可以看作 /public/lottie.json

    // animationData: json,  // 或者这样使用 import json from '../../public/lottie.json'

  })
})
</script>

<style scoped lang="scss">
.lottie-test {
  width: 50vw;
}
</style>
